import React, {  useEffect, useState } from 'react'

import { Link,useHistory } from 'react-router-dom'
import { Button, Grid } from 'antd-mobile'
import styles from './index.module.css'
import './index.css'
import '../../assets/fonts/iconfont.css'
import apiServe, { https } from '../../api/apiServer'
import { isToken, remoToken, getToken } from '../../api/storage'
export default function Profile () {
	// 菜单数据
	const menus = [
		{ id: 1, name: '我的收藏', iconfont: 'icon-coll', to: '/favorate' },
		{ id: 2, name: '我的出租', iconfont: 'icon-ind', to: '/rent' },
		{ id: 3, name: '看房记录', iconfont: 'icon-record' },
		{
			id: 4,
			name: '成为房主',
			iconfont: 'icon-identity',
		},
		{ id: 5, name: '个人资料', iconfont: 'icon-myinfo' },
		{ id: 6, name: '联系我们', iconfont: 'icon-cust' },
	]
	// 默认头像
    const DEFAULT_AVATAR = https + '/img/profile/avatar.png'
    // 路由hooks
    const history = useHistory()
    // 用户数据
    const [userInfo,setUserinfo] = useState({})
    useEffect(async () => {
        if (isToken()) {
            let res =await apiServe.getUserinfo()
            console.log(res)
            setUserinfo(res.body)
        }
    }, [])
    // 登录方法
    function goLogin () {
        history.push('/login')
    }
    // 退出登录
    function signOut () {
        remoToken()
        history.push('/login')
    }
	return (
		<div className={styles.useInfo}>
			{/* 头部信息页 */}
			<div className={styles.headerInfo}>
				{/* 背景 */}
				<img className={styles.bgimg} src={https + '/img/profile/bg.png'} alt='' />
				<div className={styles.headerLogin}>
					{/* 图像 */}
					<div className={styles.useImg}>{isToken() ? <img style={{ width: '100%' }} src={`${https + userInfo.avatar}`} alt='' /> : <img style={{ width: '100%' }} src={DEFAULT_AVATAR} alt='' />}</div>
					{/* 登录按钮 */}
					<div className={styles.loginbtn}>
						<p style={{ marginBottom: '15px' }}>{isToken() ? userInfo.nickname : ''}</p>
						{isToken() ? (
							<Button color='success' onClick={signOut}>
								退出登录
							</Button>
						) : (
							<Button color='success' onClick={goLogin}>
								登录
							</Button>
						)}
					</div>
				</div>
			</div>
			{/* 宫格组件 */}
			<div className={styles.gridDiv}>
				<Grid columns={3} gap={8}>
					{menus.map((item, index) => {
						return (
							<Grid.Item key={index}>
								<div className={styles.grid}>
									<span className={`firstIcon iconfont ${item.iconfont}`}></span>
									<span>{item.name}</span>
								</div>
							</Grid.Item>
						)
					})}
				</Grid>
			</div>
			{/* 底部展示图 */}
			<div className={styles.footer}>
				<img className={styles.footerImg} src={https + '/img/profile/join.png'} alt='' />
			</div>
		</div>
	)
}